<script setup>
import {useRouter, useRoute} from "vue-router";
import {useCounterStore} from "../pina/index";
const store = useCounterStore();

const router = useRouter();
const handleSelect = (e) => {
  store.incremenbiao("Analysis");
  router.push({
    name: "Analysis",
  });
};
import bannderTitle from "./home/components/bannderTitle.vue";
</script>

<template>
  <div class="clace" style="position: relative">
    <div
      style="
        position: relative;
        display: flex;
        width: 100%;
        z-index: 9999999;
        justify-content: space-between;
        align-items: center;
      "
    >
      <bannderTitle>
        <span style="font-weight: 700; margin-right: 20px"> Welcome to</span>
      </bannderTitle>
      <img
        style="width: 400px"
        src="../assets/a84a7faeb14961beb0c218a10d953b0.png"
        alt=""
      />

      <ul class="xiangc">
        <li class="wow bounceInUp">
          <p style="font-size: 30px; margin-top: 0px; font-weight: 700">
            <em style="">A database about </em>
          </p>
          <p
            style="
              font-size: 30px;
              color: #c10107;
              padding-left: 30px;
              font-weight: 700;
            "
          >
            <em>Cancer Metabolic Pathways</em>
          </p>
          <p
            style="
              font-size: 30px;
              color: #c10107;
              padding-left: 50px;
              font-weight: 700;
            "
          >
            <em>
              <em style="color: #000">and</em
              ><span style="text-decoration: underline">
                Tumor Microenvironment</span
              ></em
            >
          </p>
        </li>
      </ul>
    </div>
    <img
      style="
        position: absolute;
        width: 900px;

        bottom: -13px;
        left: 33px;
      "
      src="../assets/dc2e1972ec3a03fd69f6c6a6f9a6392.png"
      alt=""
    />
  </div>

  <div style="margin: auto; width: 1200px; height: 180px; border-radius: 20px">
    <img
      style="width: 1200px; margin-top: 20px"
      src="../assets/051ccade14ce6ccbd6520d1680e3be4.png"
      alt=""
    />

    <p
      style="
        line-height: 50px;
        font-size: 18px;
        font-weight: 700;

        word-break: break-all;
        font-family: 'Times new roman';
      "
    >
      OnMet (OncoMetabolism) is a database that enables biological researchers
      to explore and analyze cancer-associated genes, metabolism pathways, and
      regulatory miRNAs within the microenvironment. In total, OnMet curates a
      total of
      <span style="color: #c00000; font-size: 30px; font-family: '微软雅黑'">
        1,320
      </span>
      cancer-associated genes,
      <span style="color: #c00000; font-size: 30px; font-family: '微软雅黑'">
        2,910
      </span>
      metabolic pathways, about
      <span style="color: #c00000; font-size: 30px; font-family: '微软雅黑'">
        1000+
      </span>
      metabolites,
      <span style="color: #c00000; font-size: 30px; font-family: '微软雅黑'">
        421
      </span>
      cancer-associated miRNAs, and over
      <span style="color: #c00000; font-size: 30px; font-family: '微软雅黑'">
        200
      </span>
      human tumor single-cell samples from
      <span style="color: #c00000; font-size: 30px; font-family: '微软雅黑'">
        72
      </span>
      cancer types based on the latest publicly available data and databases.
      OnMet uncovers critical insights into cancer metabolic characteristics. To
      our knowledge, this is the first database offering detailed information on
      the metabolic landscape of the tumor microenvironment.
    </p>

    <div style="width: 100%; display: flex; justify-content: center">
      <img src="../assets/1c881549e047dbff651a11a637cd226.png" alt="" />
    </div>
    <div style="display: flex; margin-top: 20px">
      <img
        style="width: 60%; height: 400px"
        src="../assets/5625e2c390f1e68c9f52afd7b278447.png"
        alt=""
      />
      <img
        style="width: 40%; height: 400px"
        src="../assets/ba1b3c3ad56c02325f54f5d0c2b9067.png"
        alt=""
      />
    </div>
    <div style="width: 100%; display: flex; justify-content: center">
      <img src="../assets/a61a42175a538f718b3a4f55e94fa30.png" alt="" />
    </div>
  </div>
</template>

<style scoped>
.cole li {
  font-size: 18px;
  font-family: "微软雅黑微软雅黑";
}
.cole li:before {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #000000;
  vertical-align: middle;
  margin-right: 14px;
}

.lianright {
  width: 60%;
  height: 400px;
  background-color: red;
}
.lianxiang {
  margin-top: 30px;
}
.lianxiang li {
  font-size: 18px;
  line-height: 50px;
  color: rgb(102, 102, 102);
}
.fandh {
  font-size: 24px;
  font-weight: 700;
  color: rgb(127, 127, 127);
}
.sdsda {
  font-size: 16px !important;
}
.lianty {
  text-align: center;
  color: #5a5a5a;
}
.boleft {
  width: 40%;
  height: 400px;
  padding: 20px;
}
.lianxi {
  display: flex;

  width: 1200px;
  margin: auto;
  margin-top: 20px;
  border: 1px solid rgb(243, 243, 243);

  background-color: rgb(251, 251, 251);
}
.bm-view {
  width: 100%;

  height: 100%;
}
/* :deep(.el-tabs__item) {
  font-size: 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__item.is-active) {
  color: #ffd04b;
}
:deep(.el-tabs__active-bar) {
  background-color: #ffd04b !important;
}
:deep(.el-tabs__item:hover) {
  color: #ffd04b;
} */

.xiangc {
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}
.xiangc li {
  width: 100%;
  padding: 5px;
}
.xiangc li img {
  width: 100%;
  height: 80%;
  transition: all 0.2s linear;
}

.xiangc li p {
  font-family: "微软雅黑微软雅黑";
  font-size: 20px;
}

.clace {
  width: 1200px;
  margin: 20px auto;
  /* width: 200px;
height: 200px; */
  /* background-color: red; */
}
.serch {
  display: flex;
  align-items: center;
  width: 180px;
}
.header {
  width: 100%;
  /* position: absolute;
 
  z-index: 99999; */
  display: flex;
  padding: 0px 30px;
  background-color: rgb(255, 255, 255);
}
:deep(.el-sub-menu__title) {
  font-size: 16px;
  /* color: #fff !important; */
}
.bannder {
  margin: auto;
  display: flex;
  justify-content: center;
  width: 60vw;
}
:deep(.el-menu) {
  width: 100%;
  background: rgba(0, 0, 0, 0);
}

:deep(.el-menu-item) {
  font-size: 20px;
  /* color: #fff !important; */
}
/* :deep(.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover) {
  color: #ffd04b !important;
  background-color: rgba(0, 0, 0, 0.5);
} */
:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):focus) {
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(
    .el-menu--horizontal .el-menu .el-menu-item,
    .el-menu--horizontal .el-menu .el-sub-menu__title
  ) {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
:deep(.el-menu-item:hover) {
  color: blue !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
}
/* :deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  color: #ffd04b !important;
} */
.el-menu--horizontal.el-menu {
  border-bottom: 0;
}
</style>
